<script setup>

import { reactive, ref } from "@vue/reactivity";
import { Fold, Expand, FullScreen, Refresh, ArrowDown } from '@element-plus/icons'
import screenfull from 'screenfull'

import { useRoute, useRouter } from "vue-router";
import { post, store } from "../utils";
const route = useRoute();
const router = useRouter();

const isCollapse = ref(false);
function toggleCollapse() {
    isCollapse.value = !isCollapse.value;
}

function reloadPage() {
    location.reload();
}

function logout() {
    store.remove('token');
    router.push('/login');
}

// tabs
import useTabs from '../hooks/useTabs'
import { onMounted } from "@vue/runtime-core";
const tabs = useTabs();

//menu
var menuData = reactive({
    list: []
});
let sys = import.meta.env.VITE_SYS_NAME;
function getMenu() {
    post("/api/Common/GetMenuBySys", { sys: sys }).then((res) => {
        menuData.list = res.result.list;
    });
}
onMounted(() => {
    getMenu();
})

</script>
<template>
    <el-container>
        <el-aside>
            <img src="../assets/logo.png" class="logo" />

            <el-menu
                :uniqueOpened="true"
                :default-active="route.path"
                :collapse="isCollapse"
                background-color="#282c34"
                text-color="#fff"
                active-text-color="#fff"
                :router="true"
            >
                <template v-for="item in menuData.list">
                    <el-sub-menu :index="item.id + ''" v-if="item.children">
                        <template #title>
                            <i v-if="item.icon" :class="item.icon"></i>
                            <span>{{ item.name }}</span>
                        </template>

                        <template v-for="subItem in item.children">
                            <el-sub-menu :index="subItem.id + ''" v-if="subItem.children">
                                <template #title>
                                    <i v-if="subItem.icon" :class="subItem.icon"></i>
                                    <span>{{ subItem.name }}</span>
                                </template>
                                <el-menu-item
                                    :index="thItem.url"
                                    v-for="thItem in  subItem.children"
                                >
                                    <i v-if="thItem.icon" :class="thItem.icon"></i>
                                    <span>{{ thItem.name }}</span>
                                </el-menu-item>
                            </el-sub-menu>
                            <el-menu-item :index="subItem.url" v-else>
                                <i v-if="subItem.icon" :class="subItem.icon"></i>
                                <span>{{ subItem.name }}</span>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                    <el-menu-item :index="item.url" v-else>
                        <i v-if="item.icon" :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header class="topbar">
                <div class="left">
                    <el-icon @click="toggleCollapse" class="mr-3 is-clickable" :size="18">
                        <Expand v-if="isCollapse" />
                        <Fold v-else />
                    </el-icon>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item to="/admin">首页</el-breadcrumb-item>
                        <el-breadcrumb-item
                            v-for="(item,i) in store.bcs.list"
                            :to="item.to"
                        >{{ item.label }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="right">
                    <el-icon @click="screenfull.toggle()" class="mr-3 is-clickable" :size="18">
                        <FullScreen />
                    </el-icon>
                    <el-icon @click="reloadPage" class="mr-3 is-clickable" :size="18">
                        <Refresh />
                    </el-icon>

                    <el-dropdown size="small" class="mr-4">
                        <span class="el-dropdown-link">
                            <el-avatar
                                class="mr-2"
                                :size="32"
                                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                            ></el-avatar>Admin
                            <el-icon>
                                <ArrowDown />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <!-- <el-dropdown-item divided>退出登录</el-dropdown-item> -->
                                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-header class="top-tabs">
                <div class="tabsWrap">
                    <el-tag
                        :key="item.name"
                        v-for="(item,index) in tabs.data.tabs"
                        closable
                        :type="(item.name == tabs.data.tabsIndex ? '' : 'info')"
                        :effect="(item.name == tabs.data.tabsIndex ? 'dark' : 'plain')"
                        @close="tabs.closeTab(item)"
                        @click="tabs.swatchTab(item)"
                    >{{ item.title }}</el-tag>
                </div>
                <div class="tabsOpt">
                    <el-dropdown size="small" v-if="tabs.data.tabs.length > 0" class="mr-4">
                        <span class="el-dropdown-link">
                            更多操作
                            <el-icon>
                                <ArrowDown />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="tabs.closeOtherTabs">关闭其他</el-dropdown-item>
                                <el-dropdown-item @click="tabs.closeRightTabs">关闭右侧</el-dropdown-item>
                                <el-dropdown-item @click="tabs.closeLeftTabs">关闭左侧</el-dropdown-item>
                                <el-dropdown-item @click="tabs.closeAllTabs">关闭全部</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <div class="main">
                    <router-view></router-view>
                    <!-- <router-view v-slot="{ Component }">
                        <transition name="fade">
                            <component :is="Component" />
                        </transition>
                    </router-view>-->
                </div>
            </el-main>
            <el-footer>Copyright by lucky7 2021 基于vite + vue3 + element-plus 开发</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
#app {
    color: var(--el-text-color-primary);
}
.el-container {
    height: 100%;
}
.logo {
    margin: 20px 0;
    width: 50px;
    height: 50px;
}
.el-header {
    height: 50px;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 0;
    .left,
    .right {
        display: flex;
        align-items: center;
    }
}
.el-header.top-tabs {
    height: 40px;
    border-bottom: none;

    .tabsWrap {
        height: 100%;
        flex-grow: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;

        .el-tag {
            cursor: pointer;
            height: 32px;
            font-size: 14px;
            padding: 0 12px;
            line-height: 32px;
            border-radius: 2px;
        }
        .el-tag + .el-tag {
            margin-left: 5px;
        }
    }
    .tabsOpt {
        font-size: 12px;
        padding-left: 10px;
        padding-right: 5px;
        flex-shrink: 0;
        .icon {
            margin-right: 0;
        }
    }
}

.el-footer {
    height: 35px;
    border-top: 1px dashed #e2e5eb;

    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-aside {
    background-color: #282c34;
    width: unset;
    text-align: center;
    .el-menu {
        text-align: left;
        border-right: none;
        &:not(.el-menu--collapse) {
            width: 240px;
        }

        .el-menu-item {
            &.is-active,
            &:hover {
                background-color: #409eff !important;
            }
        }
    }
}

.el-main {
    background-color: #f6f8f9;
    overflow: hidden;
    padding: 10px;
    .main {
        height: 100%;
        background-color: #fff;
        overflow: auto;
        padding: 15px 10px;
        box-sizing: border-box;
    }
}

.el-dropdown-link {
    display: flex;
    align-items: center;
    cursor: pointer;
}
</style>